<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in bannerList" :key="item.imageUrl">
        <img :src="item.imageUrl" alt="" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
import axios from "axios";
import "swiper/css/swiper.css";

export default {
  data() {
    return {
      bannerList: [],
    };
  },
  updated() {},
  watch: {
    bannerList: {
      handler() {
        this.$nextTick(() => {
          new Swiper(".swiper-container", {
            slidesPerView: 1,
            pagination: {
              el: ".swiper-pagination",
            },
            autoplay: {
              delay: 3000,
              disableOnInteraction: false,
            },
          });
        });
      },
      deep: true,
    },
  },
  methods: {
    getBanner() {
      axios({
        url: "http://114.116.29.103:3000/banner",
        method: "GET",
      }).then((res) => {
        console.log(res, "data");
        this.bannerList = res.data.banners;
      });
    },
  },
  mounted() {
    this.getBanner();
  },
};
</script>

<style scoped>
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
